<template>
	<div class="">
		<h2 class="title">商品列表</h2>
		<div class="list">
			<ul  v-for="item in goodsList" :key="item.id">
				<li>
					<div class="piture">
						<img :src="item.src" />
					</div>
					<div class="info">
						<p class="name">{{item.title}}</p>
						<p class="price">￥{{item.price}}</p>
						<button class="btn" @click="add(item)">加入购物车</button>
					</div>
				</li>
			</ul>
			<div class="a">
				
			</div>
		</div>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
// @ is an alias to /src
import Tabbar from '@/components/Tabbar.vue'
import { mapState } from 'vuex'
export default {
  name: 'goodsList',
  components: {
    Tabbar,
  },
 computed:{
 	...mapState({
 		goodsList:'goodsList',
 		}),
 
	},
	methods:{
		add(item){
			 this.$store.commit('add',item);
		}
	}
	}
</script>
<style type="text/css">
	.title{
		text-align: center;
	}
	ul{
		list-style: none;
		margin: 0;
		width: 99%;
		padding: 0;
		
	}
	li{
		display: flex;
		flex-direction: row;
		
		height: 120px;
		border: 1px solid gainsboro;
		
	}
	.info{
		margin-left: 60px;
		margin: 0;
		padding: 0;
	}
	
	.piture img{
		margin-left: 30px;
		width: 100px;
		height: 100px;
	}
	.name{
		font-size: ;
	}
	.price{
		color: red;
	}
	.btn{
		background-color: orangered;
		color: white;
		text-align: center;
		border-radius: 2px;
		padding: 2px 6px;
	}
	.a{
		
		height: 50px;
		
	}
</style>